<template>
  <div id="login">
    <div id="nav-bottom">
      <!--顶部-->
      <div class="nav-top">
        <div class="top">
          <div class="py-container">
            <div class="shortcut">
              <ul class="fl">
                <li class="f-item">青橙欢迎您！</li>
                <li class="f-item">请<a href="javascript:;">登录</a><span><a href="javascript:;">免费注册</a></span></li>
              </ul>
              <div class="fr typelist">
                <ul class="types">
                  <li class="f-item"><span>我的订单</span></li>
                  
                  <li class="f-item"><span><a href="javascript:;" >我的购物车</a></span></li>
                  <li class="f-item"><span><a href="javascript:;">我的青橙</a></span></li>			
                  <li class="f-item"><span>青橙会员</span></li>						
                  <li class="f-item"><span>企业采购</span></li>						
                  <li class="f-item"><span>关注青橙</span></li>
                  <li class="f-item"><span><a href="javascript:;">合作招商</a></span></li>
                  <li class="f-item"><span><a href="javascript:;">商家后台</a></span></li>				
                  <li class="f-item"><span>网站导航</span></li>
                </ul>
              </div>
              
            </div>
          </div>
        </div>

        <!--头部-->
        <div class="header">
          <div class="py-container">
            <div class="yui3-g Logo">
              <div class="yui3-u Left logoArea">
                <a class="logo-bd" title="青橙" href="javascript:;" @click="$router.push('/home')"></a>
              </div>
              <div class="yui3-u Rit searchArea">
                <div class="search">
                  <form action="" class="sui-form form-inline">
                    <!--searchAutoComplete-->
                    <div class="input-append">
                      <input type="text" id="autocomplete" class="input-error input-xxlarge" />
                      <button class="sui-btn btn-xlarge btn-danger" type="button" @click="$router.push('/Search')">搜索</button>
                    </div>
                  </form>
                </div>
              </div>
              
            </div>

          </div>
        </div>
      </div>
    </div>
    <div class="login-box">
      <!--loginArea-->
      <div class="loginArea">
        <div class="py-container login">
          <div class="loginform">
            <ul class="sui-nav nav-tabs tab-wraped">
              <li id="tabOtherLogin" onclick="switchOtherLogin()">
                <a href="javascript:void(0)" data-toggle="tab" >
                  <h3>扫描登录</h3>
                </a>
              </li>
              <li id="tabSuiForm" class="active" onclick="switchSuiForm()">
                <a href="javascript:void(0)" data-toggle="tab" >
                  <h3>账户登录</h3>
                </a>
              </li>
            </ul>
            <div class="tab-content tab-wraped">
              <div id="index" class="tab-pane ">
                <p>二维码登录，暂为官网二维码</p>
                <img src="img/wx_cz.jpg" />
              </div>
              <div id="profile" class="tab-pane active">
                <form class="sui-form">
                  <div class="input-prepend"><span class="add-on loginname"></span>
                    <input id="inputName" type="text" placeholder="邮箱/用户名/手机号" class="span2 input-xfat">
                  </div>
                  <div class="input-prepend"><span class="add-on loginpwd"></span>
                    <input id="inputPassword" type="password" placeholder="请输入密码" class="span2 input-xfat">
                  </div>
                  <div class="setting">
                    <label class="checkbox inline">
                      <input name="m1" type="checkbox" value="2" checked="">
                      自动登录
                    </label>
                    <span class="forget">忘记密码？</span>
                  </div>
                  <div class="logined">
                    <a class="sui-btn btn-block btn-xlarge btn-danger" href="home.html" target="_blank">登&nbsp;&nbsp;录</a>
                  </div>
                </form>
                <div class="otherlogin">
                  <div class="types">
                    <ul>
                      <li><img src="img/qq.png" width="35px" height="35px" /></li>
                      <li><img src="img/sina.png" /></li>
                      <li><img src="img/ali.png" /></li>
                      <li><img src="img/weixin.png" /></li>
                    </ul>
                  </div>
                  <span class="register"><a href="register.html" target="_blank">立即注册</a></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--foot-->
      <div class="py-container copyright">
        <ul>
          <li>关于我们</li>
          <li>联系我们</li>
          <li>联系客服</li>
          <li>商家入驻</li>
          <li>营销中心</li>
          <li>手机品优购</li>
          <li>销售联盟</li>
          <li>品优购社区</li>
        </ul>
        <div class="address">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100</div>
        <div class="beian">京ICP备08001421号京公网安备110108007702
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login'
}
</script>

<style lang="less" scoped>
#login {
.btn-danger:active,
.btn-danger.active,
.btn-danger:hover,
.btn-danger:focus {
  background-color: #ff713f;
  border: 1px solid #ff713f;
}
a {
  color: #666;
}
.logoArea {
  height: 84px;
}
.loginArea {
  height: 487px;
  background-color: #7e00ff;
}
.copyright {
  text-align: center;
  line-height: 24px;
}
.logo {
  background: url(../../public/img/icons.png) no-repeat;
  width: 182px;
  height: 78px;
  position: absolute;
  background-position: -367px 4px;
}
.login {
  background: url(../../public/img/loginbg.png) no-repeat;
  height: 487px;
}
.loginform {
  width: 380px;
  background: #fff;
  float: right;
  top: 45px;
  position: relative;
  padding: 20px;
}
img {
  display: block;
  margin: 0 auto;
}
.sui-form {
  margin-top: 15px;
}
span.loginname {
  background-image: url(../../public/img/icons.png);
  background-position: -10px -201px;
}
.sui-form .input-prepend {
  margin-bottom: 16px;
}
.sui-nav.nav-tabs.tab-wraped > li {
  width: 50%;
}
.sui-nav.nav-tabs.tab-wraped > li.active > a {
  padding-top: 0;
  border-top: 1px solid #28a3ef;
}
.sui-nav.nav-tabs.tab-wraped > li > a {
  padding: 0;
}
.sui-nav.nav-tabs.tab-wraped > li.active h3 {
  color: #ff713f;
}
.sui-form .input-prepend .add-on {
  padding: 6px 5px;
  background-color: #cfcdcd;
  width: 25px;
  float: left;
}
.sui-form input.span2 {
  width: 284px;
  float: left;
}
.loginpwd {
  background-image: url(../../public/img/icons.png);
  background-position: -72px -201px;
  display: block;
  width: 25px;
  height: 23px;
}
.setting {
  position: relative;
  margin: 0 0 25px;
}
.setting .forget {
  position: absolute;
  right: 0;
}
.logined .btn-danger {
  background-color: #ff713f;
  padding: 6px;
  border-radius: 0;
  font-size: 16px;
  font-family: 微软雅黑;
  word-spacing: 4px;
  border: 1px solid #ff713f;
}
.otherlogin {
  position: relative;
  margin-top: 30px;
}
.otherlogin .register {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 15px;
}
.types ul li {
  list-style-type: none;
  display: inline-block;
  *display: inline;
  *zoom: 1;
  width: 40px;
  height: 55px;
}
.copyright ul li {
  list-style-type: none;
  display: inline-block;
  *display: inline;
  *zoom: 1;
  border-right: 1px solid #e4e4e4;
  padding: 0 20px;
  margin: 15px 0;
}
.copyright ul li:last-child {
  border-right: 0;
}
#index {
  height: 260px;
}
}
</style>